<script setup lang='ts'>
import consola from 'consola'
import { onMounted } from 'vue';
import { useDataStore } from '@/store/data'
import useFloatLabel from '@/composables/primevue/useFloatLabel'

const dataStore = useDataStore()
const {
    countries,
    cities,
    filteredCountries,
    value1,
    value2,
    value3,
    value4,
    value5,
    value6,
    value7,
    value8,
    value9,
    value10
} = useFloatLabel()
cities.value = [
    { name: 'New York', code: 'NY' },
    { name: 'Rome', code: 'RM' },
    { name: 'London', code: 'LDN' },
    { name: 'Istanbul', code: 'IST' },
    { name: 'Paris', code: 'PRS' }
]

function updateCountryData() {
    countries.value = dataStore.countryData as Array<any>
}
onMounted(async() => {
    await dataStore.$load({ name: 'app-data' }).catch((error: any) => consola.error(error))
    updateCountryData()
});

const searchCountry = (event: Object) => {
    setTimeout(() => {
        if (!event.query.trim().length) {
            filteredCountries.value = [...countries];
        } else {
            filteredCountries.value = countries.value.filter((country) => {
                return country.name.toLowerCase().startsWith(event.query.toLowerCase());
            });
        }
    }, 250);
};
</script>

<template>
    <div class="grid p-fluid">
        <div class="col">
            <div class="card">
                <h5>Invalid State</h5>
                <div class="p-fluid grid">
                    <div class="col-12 md:col-6">
                        <div class="field">
                            <label for="inputtext">InputText</label>
                            <InputText id="inputtext" type="text" v-model="value1" invalid />
                        </div>
                        <div class="field">
                            <label for="autocomplete">AutoComplete</label>
                            <AutoComplete id="autocomplete" v-model="value2" :suggestions="filteredCountries" @complete="searchCountry($event)" field="name" invalid />
                        </div>
                        <div class="field">
                            <label for="calendar">Calendar</label>
                            <Calendar id="calendar" v-model="value3" invalid :showIcon="true" />
                        </div>
                        <div class="field">
                            <label for="chips">Chips</label>
                            <Chips id="chips" v-model="value4" invalid />
                        </div>
                        <div class="field">
                            <label for="password">Password</label>
                            <Password id="password" v-model="value10" invalid />
                        </div>
                    </div>

                    <div class="col-12 md:col-6">
                        <div class="field">
                            <label for="inputmask">InputMask</label>
                            <InputMask id="inputmask" v-model="value5" mask="99/99/9999" slotChar="mm/dd/yyyy" invalid />
                        </div>
                        <div class="field">
                            <label for="inputnumber">InputNumber</label>
                            <InputNumber id="inputnumber" v-model="value6" invalid />
                        </div>
                        <div class="field">
                            <label for="dropdown">Dropdown</label>
                            <Dropdown id="dropdown" v-model="value7" :options="cities" optionLabel="name" invalid />
                        </div>
                        <div class="field">
                            <label for="multiselect">MultiSelect</label>
                            <MultiSelect id="multiselect" v-model="value8" :options="cities" optionLabel="name" invalid />
                        </div>
                        <div class="field">
                            <label for="textarea">Textarea</label>
                            <Textarea id="textarea" v-model="value9" rows="3" invalid />
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
